<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧校园 - 班级管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/classManagement.css" rel="stylesheet">
</head>
<body>
<div class="dashboard">
    <!-- 顶部统计卡片 -->
    <div class="stats-container">
        <div class="stat-card">
            <i class="fas fa-users"></i>
            <div class="stat-info">
                <h3>总班级数</h3>
                <p id="totalClasses">0</p>
            </div>
        </div>
        <div class="stat-card">
            <i class="fas fa-graduation-cap"></i>
            <div class="stat-info">
                <h3>总学院数</h3>
                <p id="totalDepartments">0</p>
            </div>
        </div>
        <div class="stat-card">
            <i class="fas fa-book"></i>
            <div class="stat-info">
                <h3>专业数量</h3>
                <p id="totalMajors">0</p>
            </div>
        </div>
    </div>

    <!-- 搜索和操作区 -->
    <div class="action-bar">
        <div class="search-group">
            <div class="search-input">
                <i class="fas fa-search"></i>
                <input type="text" id="searchID" placeholder="搜索班级ID">
            </div>
            <div class="search-input">
                <i class="fas fa-font"></i>
                <input type="text" id="searchName" placeholder="搜索班级名称">
            </div>
            <button id="searchBtn" class="btn-primary">
                <i class="fas fa-search"></i> 搜索
            </button>
        </div>
        <button id="addClassBtn" class="btn-success">
            <i class="fas fa-plus"></i> 添加班级
        </button>
    </div>

    <!-- 数据表格 -->
    <div class="table-responsive">
        <table id="classTable" class="table">
            <thead>
            <tr>
                <th>班级ID</th>
                <th>班级名称</th>
                <th>所属学院</th>
                <th>专业</th>
                <th>年级</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!-- 数据将通过JS动态加载 -->
            </tbody>
        </table>
    </div>

    <!-- 分页控件 -->
    <div class="pagination-container">
        <button id="prevPage" class="btn-page">
            <i class="fas fa-chevron-left"></i> 上一页
        </button>
        <div class="page-info">
            第 <span id="currentPage">1</span> 页
        </div>
        <button id="nextPage" class="btn-page">
            下一页 <i class="fas fa-chevron-right"></i>
        </button>
    </div>
</div>

<!-- 模态框 -->
<div id="editModal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalTitle">编辑班级信息</h3>
            <button class="close-btn" id="closeModal">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label for="editClassID">班级ID</label>
                <input type="text" id="editClassID" class="form-control">
            </div>
            <div class="form-group">
                <label for="editClassName">班级名称</label>
                <input type="text" id="editClassName" class="form-control">
            </div>
            <div class="form-group">
                <label for="editDepID">所属学院</label>
                <input type="text" id="editDepID" class="form-control">
            </div>
            <div class="form-group">
                <label for="editMajor">专业</label>
                <input type="text" id="editMajor" class="form-control">
            </div>
            <div class="form-group">
                <label for="editGrade">年级</label>
                <input type="text" id="editGrade" class="form-control">
            </div>
        </div>
        <div class="modal-footer">
            <button id="saveChanges" class="btn-primary">
                <i class="fas fa-save"></i> 保存
            </button>
            <button id="cancelEdit" class="btn-secondary">
                <i class="fas fa-times"></i> 取消
            </button>
        </div>
    </div>
</div>

<!-- 加载动画 -->
<div id="loadingSpinner" class="loading-spinner">
    <div class="spinner"></div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="${pageContext.request.contextPath}/js/classManagement.js"></script>
</body>
</html>